<!--
 * @FileDescription: el-table-column 的封装，用于生成使用 el-switch 的开关列
 -->
<script setup lang="ts">
import _ from 'lodash';

export interface ColumnSwitch {
  prop: string; // 对应数据的字段名，该字段必须是 boolean 类型
  label?: string; // 表头显示的文本
  width?: number; // 列宽度
  activeText?: string; // 开关打开时的文本
  inactiveText?: string; // 开关关闭时的文本
  inlinePrompt?: boolean; // 文本行内显示
  onSwitch?: (row: any, abort?: () => void) => void; // 开关切换时的回调，第二个参数可以用于取消切换
}

const defaultVal = {
  // 列的默认配置，使用 _.defaults 方法合并
  width: 80,
  activeText: '是',
  inactiveText: '否',
  inlinePrompt: true,
  onSwitch: () => {},
};

defineProps<{
  columns: ColumnSwitch[]; // 表格列配置
}>();
</script>

<template>
  <el-table-column
    v-for="col in columns.map((col) => _.defaults(col, defaultVal))"
    :key="col.prop"
    :prop="col.prop"
    :label="col.label"
    :width="col.width"
  >
    <template #default="{ row, column, $index }">
      <slot :row="row" :column="column" :index="$index">
        <el-switch
          v-model="row[col.prop]"
          @change="col.onSwitch(row, () => (row[col.prop] = !row[col.prop]))"
          :inline-prompt="col.inlinePrompt"
          :active-text="col.activeText"
          :inactive-text="col.inactiveText"
          style="--el-switch-off-color: #5e5e5e"
        />
      </slot>
    </template>

    <template #header="{ column, $index }">
      <slot name="header" :column="column" :index="$index"></slot>
    </template>
  </el-table-column>
</template>

<style scoped></style>
